/*
我是公共组件表格，分页卡片
 */

<template>
  <div class="TableCard">

    <el-tag v-if="elseText&&basicData.length!==0" class="elseText" type="warning">{{ elseText }}</el-tag>
    <el-card>
      <el-row v-if="btnData.show || btnData2.show">
        <el-button v-if="btnData.show" class="add elbtn" @click="btnClick">   {{ btnData.name }}
        </el-button>
        <el-button v-if="btnData2.show" class="elbtn">
          {{ btnData2.name }}
        </el-button>
      </el-row>
      <div v-if="basicData.length===0">
        <el-divider v-if="basicData.length===0&&btnData.show" />
        <el-empty
          class="empty"
          image="	http://www-wms-java.itheima.net/img/empty.4300e933.png"
          description="没有分配库位哦"
        /></div>
      <div v-else>

        <el-table
          fit
          border
          :data="basicData"
          style="width: 100%"
          stripe
          size="mini"
          :row-style="{height:'10px'}"
          max-height="400px"
          @selection-change="handleSelectionChange"
        >

          <el-table-column
            v-if="(btnData2.show&&btnData2.click===2)||(btnData.show&&btnData.click===2)"
            type="selection"
            show-overflow-tooltip
            width="55"
          />
          <el-table-column align="center" label="序号" width="100">
            <template v-slot="{ $index }">
              <span v-html="(current-1)*size+$index + 1" />
            </template>
          </el-table-column>
          <el-table-column
            v-for="(value, key) in commerceEnum[enumName]"
            :key="key"
            align="center"
            :prop="key"
            :label="value"
            :min-width="( basicData.length>5)?'24%':'200px'"
          />
          <!-- :width="basicData.length>5?200:''" -->
          <el-table-column v-if="btnData.show" align="center" fixed="right" label="操作" width="200">
            <template v-slot="{ row }">
              <el-button v-for="(value,key) in commerceEnum[(enumName+'Method')]" :key="key" class="done" type="text" size="small" @click="$emit(key,row.id,row)">{{ value }}</el-button>
            </template>
          </el-table-column>

        </el-table>
        <el-row type="flex" justify="center">
          <el-pagination
            v-if="btnData.show||elseText"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            :current-page="current"
            :page-size="size"
            :page-sizes="[10, 20, 30, 40]"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          /></el-row>
      </div>
    </el-card>
  </div>
</template>

<script>
// import { mapState } from 'vuex'
import commerceEnum from '@/constan/commerce'

export default {
  name: 'TableCard',
  props: {
    btnData: {
      type: Object,
      required: false,
      default: function() {
        return { name: '增加', show: false, click: 1 }
      }
    },
    btnData2: {
      type: Object,
      required: false,
      default: function() {
        return { name: '增加', show: false, click: 1 }
      }
    },
    enumName: {
      type: String,
      required: true
    },
    elseText: {
      type: String,
      required: false,
      default: ''
    }
  },
  data() {
    return {
      commerceEnum,
      // 基础数据
      basicData: [],
      total: 1,
      size: 10,
      current: 1
    }
  },
  computed: {
    // ...mapState('table', ['basicData'])
  },
  created() {
  },
  methods: {
    // 每页几行
    handleSizeChange(val) {
      this.size = val
      this.updataData()
    },
    // 页码改变
    handleCurrentChange(val) {
      this.current = val
      this.updataData()
    },
    // 调用主页面渲染函数
    updataData() {
      this.$emit('render', { size: this.size, current: this.current }
      )
    },
    // 按钮一
    btnClick() {
      if (this.btnData.click === 1) {
        this.$router.push(`${this.$route.path}/addnew/null`)
      } else {
        this.$emit('btnClick')
      }
    },
    // 按钮一
    btn2Click() {
      this.$emit('btn2Click')
    },
    // 表格多选框选中
    handleSelectionChange(value) {
      console.log(value)
    }
  }
}
</script>

<style lang="scss">
.TableCard {
.empty{
  height: 300px;
}
  .el-card__body {
    padding: 0;
  }
}
  .el-card {
    .el-button.add{
      background-color: rgb(125, 171, 129);
color: #fff;

    }
    .el-button{
color: #000;
      border-radius: 20px;
    }
    .el-table {
      margin-bottom: 10px;
      tr.el-table__row--striped {
        td{
background-color: #fffbf3;
      }}
.el-button--text{
  :hover{
  color: #ff9100;
  }
  color: #ffcf5f;
}

.hover-row{
  td{
background-color: #fff6e2 !important;
}}
    background-color: #fff;
  th {
    background-color: #f9f6ee;
    }
  }
    .el-collapse-item__content{
padding-bottom: 0;
  }
}
</style>

<style lang="scss" scoped>
.TableCard {
  width: 95%;
  margin: 20px auto;

  .el-card {
    border-radius: 10px;
.done{
  :hover{
    background-color: transparent;
  }
}
    .elbtn {
      margin: 20px;
    }
  }

  .elseText{
    margin:-10px 0 20px 4px;
  }
}
</style>
